/* The div that contains the editor */
#edit1 {
	position: fixed;
	top: 24px;
	left: 0;
	right: 0;
	bottom: 0;
}

.oc-codemirror-editorwidget {
	border: 1px solid #7788aa;
	border-radius: 4px;
	padding: 2px;
}

/* Editor appearance modifications */
.CodeMirror {
	background-color: /*begin-color Window*/#ffffff/*end-color*/;
}

/* Initial editor font */
.CodeMirror span, .CodeMirror pre, .CodeMirror-linenumber {
	font-family: Monospace, sans-serif; 
	font-size: 14px;
	line-height: 1.2em;
}

/* Gutter with minimum width to be capable of large line numbers */
.CodeMirror-linenumber  {
	min-width: 3em; 
	cursor: pointer;
}


/* Active editor line */
.CodeMirror-activeline-background {
	background: #ecf6ff !important;
}

/* Visible tabs layout */
.cm-tab:after {
	content: "\2192";
	display: -moz-inline-block;
	display: -webkit-inline-block;
	display: inline-block;
	width: 0px;
	position: relative;
	overflow: visible;
	left: -1.4em;
	color: #999;
	visibility: hidden;
}

/* Modification for search dialogs */
.CodeMirror-dialog {
	position: fixed;
	top: 35%; left: 50%;
	width: 300px;
	margin-left: -150px;
	background: /*begin-color ButtonFace*/#f0f0f0/*end-color*/;
	border: 1px solid /*begin-color ButtonShadow*/#999999/*end-color*/;
	z-index: 15;
	padding: 2em;
	overflow: hidden;
	color: /*begin-color WindowText*/#000000/*end-color*/;
	font-family: Verdana Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.CodeMirror-dialog > div {
}

.CodeMirror-dialog span {
	font-family: Verdana Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
}

.CodeMirror-dialog input, .oc-codemirror-editorwidget .CodeMirror-dialog input {
	border: 1px solid /*begin-color ButtonShadow*/#999999/*end-color*/;
	outline: none;
	background: /*begin-color Window*/#ffffff/*end-color*/;
	width: 18em;
	float: right;
	margin-left: 1em;
	color: /*begin-color WindowText*/#000000/*end-color*/;
}

.CodeMirror-dialog button {
	margin-left: 1em;
	font-size: 12px !important;
}


.oc-codewidget-toolbar .oc-codewidget-button * {
	font-family: opencms-font; 
	font-size: 20px;
}

.oc-codewidget-toolbar .oc-codewidget-button {
	width: 34px;
	height: 34px;
	border-radius: 4px; 
	cursor: pointer; 
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 2px;
	margin-right: 2px;
}

.oc-codewidget-toolbar .oc-codewidget-button:hover {
	background-color: rgb(220, 220, 220);
}

.oc-codewidget-toolbar .oc-codewidget-button.cmsState-down {
	background-color: rgb(200, 200, 200);
}

.oc-codewidget-toolbar .oc-codewidget-button.oc-disabled {
	cursor: default;
	background-color: transparent;
}

.oc-codewidget-toolbar .oc-codewidget-button.oc-disabled *  {
	color: rgb(153, 153, 153);
}

.oc-codewidget-toolbar { 
	height: 40px;
	display: flex;
	align-items: center; 
	border-bottom: 1px solid #7788aa;
	background-color: white;
}

.oc-codemirror-editorwidget .CodeMirror-linenumber { 
	min-width: 4ch;
} 

.oc-codemirror-editorwidget .CodeMirror span, .oc-codemirror-editorwidget .CodeMirror pre, .oc-codemirror-editorwidget .CodeMirror-linenumber {
	font-size: var(--codemirror-font-size, 14px);
}

.oc-codemirror-editorwidget .CodeMirror .cm-tab::after {
	visibility: var(--codemirror-tab-state, hidden);
}

.oc-codewidget-fontsize-select {
	margin-left: 20px;
	width: 75px;
}

.oc-codewidget-mode-select {
	margin-left: 20px;
	width: 100px; 
}

.oc-codemirror-editorwidget .CodeMirror-dialog button {
	border: 1px solid black;
	padding: 2px;
	border-radius: 4px;
	min-width: 50px;
	text-align: center;
	cursor: pointer;
}

.oc-codemirror-editorwidget .CodeMirror-dialog {
	min-width: 400px;
}

.oc-codemirror-editorwidget .CodeMirror-dialog input {
	width: 20em !important;
	color: inherit;
	font-family: monospace;
	float: none;
}

/* enforce line break directly after input field. */ 
.oc-codemirror-editorwidget .CodeMirror-dialog input+*::before {
	content: " ";
	display: block;
}

.oc-codemirror-editorwidget .CodeMirror-dialog button:focus {
	outline-style: none;
} 


.oc-codemirror-editorwidget.oc-dynamic-height .CodeMirror {
	height: auto;
}

.oc-codemirror-editorwidget .CodeMirror {
	resize: vertical;
}

.oc-codemirror-editorwidget .cm-trailingspace {
        background-image: url();
        background-position: bottom left;
        background-repeat: repeat-x;
}




